<template>
    <!-- 修改密码弹窗 -->
    <el-dialog v-model="states.changePasswordDialog" title="忘记密码" width="400px">
        <el-form :label-position="labelPosition" :rules="rules">
            <el-form-item label="请输入旧密码" prop="password">
                <el-input v-model="forgetData.password" placeholder="请输入旧密码" />
            </el-form-item>
            <el-form-item label="请输入新密码" prop="repassword">
                <el-input v-model="forgetData.repassword" placeholder="请输入新密码" />
            </el-form-item>
        </el-form>
        <!-- 底部插槽 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="states.changePasswordDialog = false">取消</el-button>
                <el-button type="primary" @click="ChangePassword">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// import { verify, resetPassword } from "@/api/login.js"
// import { ElMessage } from 'element-plus';


const labelPosition = ref('top')
// 表单对象接口
interface forgetData {
    oldPassword: string;
    newPassword: string;
}
// 表单对象
const forgetData: forgetData = reactive({
    oldPassword: '',
    newPassword: ''
})
// 表单校验rules
const rules = reactive({
    oldPassword: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
    ],
})
// 控制弹窗默认关闭
const states = reactive({
    changePasswordDialog: false
})
// 打开弹窗
const open = () => {
    states.changePasswordDialog = true
}
// 下一步的弹窗
// const openChangePassword = async () => {
//     if (forgetData.account) {
//         const res = await verify(forgetData)
//         console.log(res)
//         if (res.status == 0) {
//             ElMessage({
//                 type: 'success',
//                 message: '验证成功'
//             })
//             window.localStorage.setItem('id', res.id)
//             states.forgetPasswordDialog = false
//             states.changePasswordDialog = true
//         }
//     } else {
//         ElMessage({
//             type: 'error',
//             message: '验证失败，请检查输入是否正确'
//         })
//     }
// }
// }
// 点击确定的弹窗（修改密码）
const ChangePassword = async () => {
    if (forgetData.password == forgetData.repassword) {
        const data = {
            id: window.localStorage.getItem('id'),
            newPassword: forgetData.repassword
        }
        await resetPassword(data)
        ElMessage({
            type: 'success',
            message: '修改成功'
        })
        states.changePasswordDialog = false
    } else {
        ElMessage({
            type: 'error',
            message: '修改失败，请检查输入是否有误'
        })
    }

}
// 向外暴露
defineExpose({
    open
})

</script>

<style lang="scss" scoped></style>
